<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红色记忆·青春使命 - 甘肃红色文化传承网</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <img src="images/logo.png" alt="红色记忆Logo" height="40">
                <span>红色记忆·青春使命</span>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html" class="active">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="heroes.html">红色人物</a></li>
                <li><a href="stories.html">红色故事</a></li>
                <li><a href="gallery.html">红色图库</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </nav>

    <!-- 轮播图 -->
    <section class="hero-section">
        <div class="carousel">
            <div class="carousel-item active">
                <img src="images/banner1.jpg" alt="红色文化传承">
                <div class="carousel-caption">
                    <h1>传承红色基因</h1>
                    <p>弘扬革命精神，担当时代使命</p>
                    <a href="stories.html" class="btn-primary">了解更多</a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/banner2.jpg" alt="革命历史">
                <div class="carousel-caption">
                    <h1>重温革命历史</h1>
                    <p>学习先烈精神，传承红色文化</p>
                    <a href="heroes.html" class="btn-primary">认识英雄</a>
                </div>
            </div>
        </div>
        <div class="carousel-controls">
            <button class="carousel-prev">‹</button>
            <button class="carousel-next">›</button>
        </div>
    </section>

    <!-- 网站介绍 -->
    <section class="intro-section">
        <div class="container">
            <h2>关于红色记忆</h2>
            <p>本网站是甘肃农业大学"第四届红色网页设计大赛"参赛作品，致力于通过数字化方式传承和弘扬红色文化，让革命精神在新时代焕发新的光彩。我们收集整理了丰富的红色故事、历史人物和革命文物，为青年学生提供学习红色文化的平台。</p>
        </div>
    </section>

    <!-- 特色内容 -->
    <section class="features-section">
        <div class="container">
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📚</div>
                    <h3>红色故事</h3>
                    <p>收录经典革命故事，重温峥嵘岁月</p>
                    <a href="stories.html" class="feature-link">阅读故事 →</a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">👥</div>
                    <h3>红色人物</h3>
                    <p>了解革命先烈事迹，学习英雄精神</p>
                    <a href="heroes.html" class="feature-link">认识人物 →</a>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🖼️</div>
                    <h3>红色图库</h3>
                    <p>浏览历史影像资料，感受革命岁月</p>
                    <a href="gallery.html" class="feature-link">查看图库 →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 最新故事 -->
    <section class="stories-section">
        <div class="container">
            <h2>最新红色故事</h2>
            <div class="stories-grid">
                <article class="story-card">
                    <div class="story-image">
                        <img src="images/story1.jpg" alt="会宁会师">
                    </div>
                    <div class="story-content">
                        <h3>会宁会师：长征的伟大胜利</h3>
                        <p class="story-date">2025年10月15日</p>
                        <p class="story-summary">1936年10月，红军三大主力在甘肃会宁胜利会师，标志着长征的胜利结束，为中国革命保存了骨干力量...</p>
                        <a href="stories.html#story1" class="read-more">阅读全文 →</a>
                    </div>
                </article>
                <article class="story-card">
                    <div class="story-image">
                        <img src="images/story2.jpg" alt="南梁革命根据地">
                    </div>
                    <div class="story-content">
                        <h3>南梁革命根据地的建立</h3>
                        <p class="story-date">2025年10月10日</p>
                        <p class="story-summary">陕甘边革命根据地是红军长征的落脚点和抗日战争的出发点，为中国革命作出了重要贡献...</p>
                        <a href="stories.html#story2" class="read-more">阅读全文 →</a>
                    </div>
                </article>
            </div>
            <div class="section-footer">
                <a href="stories.html" class="btn-secondary">查看更多故事</a>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>红色记忆·青春使命</h3>
                    <p>传承红色文化，担当时代使命</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="stories.html">红色故事</a></li>
                        <li><a href="gallery.html">红色图库</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p>邮箱：2956276440@qq.com</p>
                    <p>甘肃农业大学信息科学技术学院</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 甘肃农业大学第四届红色网页设计大赛 - 对党忠诚队 | 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>